<template>
  <div class="top-content-wrap" :style="{ height: bodyHeight + 'px' }">
    <div
      class="top-content-body"
      :style="{ zIndex, backgroundColor }"
      ref="bodyContent"
    >
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, onUpdated, ref, Ref } from "vue";

export default defineComponent({
  props: {
    zIndex: {
      type: [Number, String],
      default: 9,
    },
    backgroundColor: {
      type: String,
      default: "#fff",
    },
  },
  setup() {
    const bodyContent: Ref<HTMLDivElement | null> = ref(null);
    const bodyHeight = ref(0);
    onUpdated(() => {
      nextTick(() => {
        bodyHeight.value = bodyContent.value?.clientHeight || 0;
      });
    });
    onMounted(() => {
      nextTick(() => {
        bodyHeight.value = bodyContent.value?.clientHeight || 0;
      });
    });
    return {
      bodyContent,
      bodyHeight,
    };
  },
});
</script>
<style lang="scss" scoped>
.top-content-body {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
</style>
